<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			
			
			<el-main>
				<h3 style="margin: 15px;">实时概况
					<span style="font-weight: 400;font-size: 14px;color: #333;">更新时间 {{ nowTime }}</span>
				</h3>
				<!-- 第一行 -->
				<el-row>
					<el-col :span="6">
						<div class="statistic-card">
							<el-statistic :value='data.ordersNumberToday' >
								<template #title>
									<div style="display: inline-flex; align-items: center">今日订单数
										<el-icon style="margin-left: 4px" :size="12"><Warning /></el-icon>
									</div>
								</template>
							</el-statistic>
							<div class="statistic-footer">
								<div class="footer-item">
									<span>昨日：</span><span>{{data.ordersNumberYesterday}}</span>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="statistic-card">
							<el-statistic :value='data.salesToday'>
								<template #title>
									<div style="display: inline-flex; align-items: center">今日销售额
										<el-icon style="margin-left: 4px" :size="12"><Warning /></el-icon>
									</div>
								</template>
							</el-statistic>
							<div class="statistic-footer">
								<div class="footer-item">
									<span>昨日：</span><span>{{data.salesYesterday}}</span>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="statistic-card">
							<el-statistic :value='data.refundToday'>
								<template #title>
									<div style="display: inline-flex; align-items: center">今日退款金额
										<el-icon style="margin-left: 4px" :size="12"><Warning /></el-icon>
									</div>
								</template>
							</el-statistic>
							<div class="statistic-footer">
								<div class="footer-item">
									<span>昨日：</span><span>{{data.refundYesterday}}</span>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="statistic-card">
							<el-statistic :value="5">
								<template #title>
									<div style="display: inline-flex; align-items: center">今日浏览量
										<el-icon style="margin-left: 4px" :size="12"><Warning /></el-icon>
									</div>
								</template>
							</el-statistic>
							<div class="statistic-footer">
								<div class="footer-item">
									<span>昨日：</span><span>0</span>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<!-- 第二行 -->
				<el-row>
					<el-col :span="6" style="padding-left: 20px;">
					    <el-statistic :value='data.ordersNumber' title="订单总数"/>
					</el-col>
					<el-col :span="6" style="padding-left: 20px;">
					    <el-statistic :value='data.sales' title="销售总额(元)"/>
					</el-col>
					<el-col :span="6" style="padding-left: 20px;">
					    <el-statistic :value='data.refund'  title="退款金额"/>
					</el-col>
					<el-col :span="6" style="padding-left: 20px;">
					    <el-statistic title="总浏览量" :value="0" />
					</el-col>
				</el-row>
				<h3 style="margin: 20px;">待办事项</h3>
				<!-- 第三行 -->
				<el-row>
					<el-col :span="4">
						<div class="statistic-card" style="padding: 0 0 0 20px;">
							<el-statistic :value='data.obligation' >
								<template #title>
									<div style="display: inline-flex; align-items: center">待付款订单
										<el-icon style="margin-left: 4px" :size="12"><Warning /></el-icon>
									</div>
								</template>
							</el-statistic>
						</div>
					</el-col>
					<el-col :span="4" style="padding-left: 20px;">
					    <el-statistic title="待发货订单" :value='data.shipped' />
					</el-col>
					<el-col :span="4" style="padding-left: 20px;">
					    <el-statistic title="待收货订单" :value='data.received' />
					</el-col>
					<el-col :span="4" style="padding-left: 20px;">
					    <el-statistic title="退款订单" :value='data.refundOrder' />
					</el-col>
					<el-col :span="4" style="padding-left: 20px;">
					    <el-statistic title="出售商品数量" :value='data.sellGoods'/>
					</el-col>
					<el-col :span="4" style="padding-left: 20px;">
					    <el-statistic title="仓库商品数量数" :value='data.inventory' />
					</el-col>
				</el-row>
				<div class="echarts-container" style="width: 100%;margin-top: 20px;">
					<div class="chart-item" ref="echartsRef" style="width: 50%;height:400px;"></div>
					<div class="chart-item"  ref="echartsRef2" style="width: 50%;height:400px;"></div>
				</div>
				
			</el-main>
		</el-container>
	</div>
</template>
<script setup>
	import Header from "@/components/Header.vue"
	import {reactive,ref,onMounted} from 'vue';
	import {useCounterStore} from "../stores/counter"
	import {About} from "@/api"
	import {uploadUrl,baseUrl} from "@/utils/request";
	import {Plus} from '@element-plus/icons-vue'
	import {ArrowRight,CaretBottom,CaretTop,Warning} from '@element-plus/icons-vue'
	import * as echarts from 'echarts';
	const nowTime = ref('')

	const formateDate = () => {
		const time = new Date()
		const year = time.getFullYear()
		const month = time.getMonth() + 1
		const day = time.getDate()
		const hour = time.getHours()
		const minute = time.getMinutes()
		const second = time.getSeconds()
		return `${year}-${month}-${day} ${hour}:${minute}:${second}`
	}
	let timer = 0

	let data=reactive({})
	let chart1=ref([])
	let chart2=ref([])
	
	// 前一周日期
	function getLastWeekDates() {
	  let dates = [];
	  for (let i = 0; i < 5; i++) {
	    let date = new Date();
	    date.setDate(date.getDate() - (i + 1)); // 从当前日期往前推5天
	    let month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
	    let day = date.getDate();
	    // 格式化月份和日期，保持两位数
	    month = ('0' + month).slice(-2);
	    day = ('0' + day).slice(-2);
	    dates.unshift(`${month}-${day}`);
	  }
	  return dates;
	}
	// 使用函数
	let lastWeekDates = getLastWeekDates();
	// console.log(lastWeekDates); // 打印近期五天的日期数组
	
	
	//概况列表
	const about = async ()=>{
		const time1=new Date()
		const year1 = time1.getFullYear()
		const month1 = time1.getMonth() + 1
		const day1 = time1.getDate()
		const todyTime=`${year1}-${month1}-${day1}`
		let res=await About({
			date:todyTime,
			siteId:"1"
		})
		// console.log("结果",res)
		for(var i in res){
			if(res[i]==null){
				res[i]=0
			}
		}
		for(var m=0;m<res.ordersNumberImage.length;m++){
			if(res.ordersNumberImage[m] == null){
				res.ordersNumberImage[m]=0
			}
		}
		for(var m=0;m<res.salesImage.length;m++){
			if(res.salesImage[m] == null){
				res.salesImage[m]=0
			}
		}
		//data=res
		Object.assign(data,res);
		// console.log("概况数据",data)
		// chart1.value=data.ordersNumberImage
		// console.log(chart1.value)
		// 使用函数
		let lastWeekDates = getLastWeekDates();
		// console.log(lastWeekDates); // 打印近期五天的日期数组
		mychart1(lastWeekDates,data.ordersNumberImage)
		mychart2(lastWeekDates,data.salesImage)
	}
	let data1 = ref()
	// const echartsRef = ref(null);
	onMounted(async() => {
		about()
		timer = setInterval(() => {
			nowTime.value = formateDate()
		}, 1000)
	})
	const echartsRef = ref(null);
	const mychart1=(date1,dataArr2) => {
	  const chart = echarts.init(echartsRef.value);
	  const option = {
	    // ECharts 配置项
	    title: {
	      text: '订单量趋势'
	    },
	    tooltip: {},
	    xAxis: {
	      data: date1
	    },
	    yAxis: {
			type:"value"
		},
	    series: [{
	      name: '销量',
	      type: 'line',
	      data: dataArr2
	    }]
	  };
		chart.resize({
		    width: 550,
		    height: 400
		});
	  chart.setOption(option);
	};
	const echartsRef2 = ref(null);
	const mychart2=(date2,dataArr) => {
	  const chart2 = echarts.init(echartsRef2.value);
	  const option2 = {
	    // ECharts 配置项
	    title: {
	      text: '销售额（元）'
	    },
	    tooltip: {},
	    xAxis: {
	      data: date2
	    },
	    yAxis: {
			type:"value"
		},
	    series: [{
	      name: '销量',
	      type: 'line',
	      data:dataArr
	    }]
	  };
		chart2.resize({
		    width: 550,
		    height: 400
		});

	  chart2.setOption(option2);
	};
	
	
</script>
<style scoped lang="less">
	.common-layout {
		background: #f2f3f5;

		.el-header {
			padding: 0 !important;
			height: 10vh;
		}

		.el-main {
			height: 86vh;
			padding: 0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	
	// 统计卡片
	:global(h2#card-usage ~ .example .example-showcase) {
	  background-color: var(--el-fill-color) !important;
	}
	
	.el-statistic {
	  --el-statistic-content-font-size: 28px;
	}
	
	.statistic-card {
	  height: 100%;
	  padding: 20px;
	  border-radius: 4px;
	  background-color: var(--el-bg-color-overlay);
	}
	
	.statistic-footer {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  flex-wrap: wrap;
	  font-size: 12px;
	  color: var(--el-text-color-regular);
	  margin-top: 16px;
	}
	
	.statistic-footer .footer-item {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.statistic-footer .footer-item span:last-child {
	  display: inline-flex;
	  align-items: center;
	  margin-left: 4px;
	}
	
	.green {
	  color: var(--el-color-success);
	}
	.red {
	  color: var(--el-color-error);
	}

	.echarts-container {
	  display: flex !important;
	  justify-content: space-evenly !important; /* 图表之间有间隔 */
	}
	// .chart-item {
	//   flex: 1; /* 图表平分空间 */
	// }
</style>
